<template>
    <hb-box :title="Lang.title[lang]" @select="e_sss">
        <ul :style="style.box" class="box">
            <li v-for="(v, i) in Lang.list[lang]" :key="i" :style="i === 0 ? style.firstItem : style.items" class="flex">
                <span class="i0 ilbk" v-text="v" />
                <span class="i1" v-text="mlist[i]" />
                <hb-button2 v-if="i === 2" class="btn" :txt="Lang.btn[lang]" @clk="e_change" />
            </li>
        </ul>
    </hb-box>
</template>

<script>
import {langBase} from './lang'
import style from '../style'
import {phoneHandle} from '@d/qsoft'
export default {
	data() {
		return {
			Lang: langBase,
			style,
		}
	},
	computed: {
		user() {
			let u = this.$store.state.user.name
			return phoneHandle(u)
		},
		uid() {
			let u = this.$store.state.user.uid
			return u
		},
		mlist() {
			return [this.user, this.uid, '******']
		},
		lang() {
			return this.$store.state.setting.lang
		},
	},
	created() {},
	methods: {
		e_sss(i, v) {
			console.log(i)
			console.log(v)
		},
		e_change() {
			this.$router.push('safe/change')
		},
	},
}
</script>

<style scoped>
.i0 {
	width: 220px;
	color: var(--txt);
}
.btn {
	margin-left: auto;
}
</style>